<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.shopping{
				width: 990px;
				height: 470px;
				border: 1px solid;
				margin: 0 auto;
			}
			.shopping ul{
				list-style: none;
				
				
			}
			.shopping:after{
				display: block;
				content: 0;
				clear: both;
			}
			.shopping ul li{
				width: 196px;
				height: 234px;
				float: left;
				border: 1px solid #666666;
				position: relative;
			}
			.shopping ul li img{
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				left: 0;
				margin:auto;
			}
		</style>
	</head>
	<body>
		<div class="shopping">
			<ul>
				<li>
					<a href="#"><img src="../img/bicyle.png"></a>
					<p>家用跑步机</p>
				</li>
				<li>
					<a href="#"><img src="../img/bicyle.png"></a>
					<p>家用跑步机</p>
				</li>
				<li>
					<a href="#"><img src="../img/bicyle.png"></a>
					<p>家用跑步机</p>
				</li>
				<li>
					<a href="#"><img src="../img/bicyle.png"></a>
					<p>家用跑步机</p>
				</li>
				<li>
					<a href="#"><img src="../img/bicyle.png"></a>
					<p>家用跑步机</p>
				</li>
				<li>
					<a href="#"><img src="../img/running.png"></a>
					<p>家用跑步机</p>
				</li>
				<li>
					<a href="#"><img src="../img/running.png"></a>
					<p></p>
				</li>
				<li>
					<a href="#"><img src="../img/running.png"></a>
					<p>家用跑步机</p>
				</li>
				<li>
					<a href="#"><img src="../img/running.png"></a>
					<p>家用跑步机</p>
				</li>
				<li>
					<a href="#"><img src="../img/running.png"></a>
					<p>家用跑步机</p>
				</li>
			</ul>
			
		</div>
	</body>
</html>
